import {component,template} from 'nuijs';
module.exports = module.extend(component,{
    // _static:{
    //     _init(){
    //         console.log('_init')
    //     }
    // },
    _options:{
        /**
         * @func 树形结构的数据
         */
        data:null,
        container:'body',
    },
    _exec:function(){
        let self = this;
        let opts = this._options;
        this.data = opts.data;
        self._create();
    },
    _create(){
        let opts = this._options;
        let self = this;
        this.paramSort(this.data.capabilityTree); //能力获取list排序
        // <%=request.getContextPath()%>/Contents/openplatform/sysManagement/appManage/images/m-btn1.jpg t图片
        opts.container.html(template.render(this._template,this.data));
        self.element =  opts.container;
        self._bindEvent();
    },
    _bindEvent(){
        let self = this;
        self._event();
    },
    _events:{
        'click .u-node':function(e,elem){
            elem.toggleClass('s-collected');
            let id = elem.closest('li').data('id');
            this.element.find('[data-pid="'+id+'"]')[elem.hasClass('s-collected')?'slideUp':'slideDown']();
        },
        'click .u-node-select':function(e,elem){
            elem.toggleClass('s-selected');
            let id = elem.closest('li').data('id');
            this.element.find('[data-pid="'+id+'"]').find('.u-select')[elem.hasClass('s-selected')?'addClass':'removeClass']('s-selected');
        },
        'click .u-select':function(e,elem){
            elem.toggleClass('s-selected');
            let li = elem.closest('li');
            let id = li.data('pid');
            let num = this.element.find('[data-pid="'+id+'"]').find('.u-select.s-selected').length;
            let nodeSelect= this.element.find('[data-id="'+id+'"]').find('.u-node-select');
            nodeSelect[(num)?'addClass':'removeClass']('s-selected');
        },
    },
    _template:`
   <div class="m-tree">
    <ul>
        <%each capabilityTree val key%>
        <li class="m-tree-<%val.c_layer%>" data-level="<%val.c_layer%>" data-id="<%val.id%>" data-pid="<%val.pId%>" <%if val.c_layer!='0'%> style="margin-left:<%10*val.c_layer+25%>px"<%/if%>>
        <%if val.c_layer == '0'%>
            <s class="iconfont u-node"></s>
            <s class="iconfont u-node-select <%if val.state == '0'%>s-selected<%/if%>"></s>
            <span class="e-ml5"><%val.name%></span>
        <%else%>
            <div class="f-dib <%if val.state == '0'%>s-selected<%/if%> <%if val.c_layer != '0'%>u-select<%/if%>" data-name="<%val.name%>">
                <s class="iconfont u-select-status"></s>
                <span class="u-name">
                    <%val.name%>
                </span>
            </div>
        <%/if%>
        </li>
        <%/each%>
    </ul>
   </div>
    `,
    toArray(){//将树形结构数据转化为简单的Array格式

    },
    toTreeNodes(){//将简单的Array转化为标准的JSON嵌套数据格式

    },
    paramSort:function(param){//数据二次处理
        let that = this;
        let midArr=[]; //过渡数组
        let i=0;
        let x=i+1;
        let priList=[];
        let eLayNum=0; //编辑时候的层级
        $.each(param,function(key,val){
            if(val.pId=='0'){
                val.c_layer=eLayNum;
                priList.push(val);
            }else{
                midArr.push(val);
            }
        });
        let nextEle=priList[i];
        param=midArr;
        midArr=[];
        //表格参数递归
        let listSort=function(param,nextEle){
            if(!param.length){return false;}
            $.each(param,function(key,val){
                if(nextEle && val.pId==nextEle.id){
                    val.c_layer=nextEle.c_layer+1;
                    priList.splice(x,0,val);
                    x=x+1;
                }else{
                    midArr.push(val);
                }
            });
            if(i<priList.length-1){
                i=i+1;
                nextEle=priList[i];
                x=i+1;
                param=midArr;
                midArr=[];
                listSort(param,nextEle);
            }else{
                return false;
            } 
        };
        listSort(param,nextEle);
        // return priList;
        that.data.capabilityTree=priList;
        
        $.each(that.data.capabilityTree,function(key,val){
            var stateCount=0;
            if(val.pId=='0'){
                $.each(that.data.capabilityTree,function(k,v){
                    if(v.pId==val.id && v.state=='0'){
                        stateCount+=1;
                    }
                });
                if(stateCount){
                    val.state=0;
                }
            }
        });
        console.log(that.data);
    }
})